<template>
	<el-card shadow="hover" header="今日看板" class="item-background">
		<div style="height: 210px;text-align: center;">
			<div>
				<div style="width: 140px;display: inline-block">
					<div>
						<div>
							<el-image :src="this.$TOOL.data.get('USER_INFO').avatar" style="width: 120px; height: 160px"/>
						</div>
						<div style="font-weight: 600;color:#FFFFFF;">
							<div style="line-height: 25px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">{{this.$TOOL.data.get('USER_INFO').deptName}}</div>
							<div style="line-height: 25px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">{{this.$TOOL.data.get('USER_INFO').userName}}-{{this.$TOOL.data.get('USER_INFO').userLevelName}}</div>
						</div>
					</div>
				</div>
				<div style="width:calc(100% - 140px);display: inline-block;float: right">
					<el-row :gutter="0" class="box-head">
						<el-col :span="8" @click="goToBpm">
							<div class="box" style="background: #529b2e;">
								<span>{{eventInfo.bpmCount}}条</span>
								<p>待办流程</p>
							</div>
						</el-col>
						<el-col :span="8" @click="goToDocSend">
							<div class="box" style="background: #e6a23c;">
								<span>{{eventInfo.docSendCount}}条</span>
								<p>发文待办</p>
							</div>
						</el-col>
						<el-col :span="8" @click="goToDocRev">
							<div class="box" style="background: #606266;">
								<span>{{eventInfo.docRevCount}}条</span>
								<p>收文待办</p>
							</div>
						</el-col>
						<el-col :span="8" @click="goToEmail">
							<div class="box" style="background: #264a68;">
								<span>{{eventInfo.emailCount}}条</span>
								<p>待阅邮件</p>
							</div>
						</el-col>
						<el-col :span="8" @click="goToMeeting">
							<div class="box" style="background: #329695;">
								<span>{{eventInfo.meetCount}}条</span>
								<p>个人会议</p>
							</div>
						</el-col>
						<el-col :span="8" @click="goToNotice">
							<div class="box" style="background: #409eff;">
								<span>{{eventInfo.noticeCount}}条</span>
								<p>待阅公告</p>
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>
	</el-card>
</template>

<script>
export default {
	components: {
	},
	data() {
		return {
			eventInfo:{
				bpmCount:0,
				docSendCount:0,
				docRevCount:0,
				emailCount:0,
				meetCount:0,
				noticeCount:0,
			},
			timer:null
		}
	},
	created() {
		clearInterval(this.timer)
		this.timer = null
	},
	beforeUnmount() {
		clearInterval(this.timer);
		this.timer = null
	},
	mounted() {
		this.getTodayKanbanInfo();
		this.setTimer();
	},
	methods: {
		async getTodayKanbanInfo(){
			var res = await this.$API.system.getTodayKanbanInfo.get();
			if (res.code == 200) {
				this.eventInfo = res.data
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		holdEvent(row, event, column) {
		},
		//本地更新数据
		handleSaveSuccess() {
			this.getTodayKanbanInfo();
		},
		setTimer() {
			if(this.timer == null) {
				this.timer = setInterval( () => {
					this.getTodayKanbanInfo();
				}, this.$TOOL.data.get("MSG_TIME"))
			}
		},
		goToBpm()
		{
			this.$nextTick(() => {
				this.$router.replace({
					path: '/bpm/approval',
				})
			})
		},
		goToDocSend(){
			this.$nextTick(() => {
				this.$router.replace({
					path: '/doc/docsend/approval',
				})
			})
		},
		goToDocRev(){
			this.$nextTick(() => {
				this.$router.replace({
					path: '/doc/docrev/approval',
				})
			})
		},
		goToEmail(){
			this.$nextTick(() => {
				this.$router.replace({
					path: '/email',
				})
			})
		},
		goToMeeting(){
			this.$nextTick(() => {
				this.$router.replace({
					path: '/office/meeting/mymeeting',
				})
			})
		},
		goToNotice(){
			this.$nextTick(() => {
				this.$router.replace({
					path: '/info/notice/mynotice',
				})
			})
		}
	}
}
</script>
<style scoped>
.item-background {background: linear-gradient(to right, #4776E6,#8E54E9);color: #fff;}
.box-head {cursor: pointer}
.box {height:105px;text-align: center;color: #FFFFFF;padding:30px 10px;}
.box i {font-size: 26px;transition: color .15s linear;}
.box p {color: #FFFFFF;margin-top: 15px;transition: color .15s linear;}
.box:hover span, .box:hover p {color: #5cb6ff;}
.box span {font-size: 20px;font-weight: 600;color: #FFFFFF;}
.dark .box-head {background: var(--el-bg-color-overlay);}
</style>
